.tab {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	&.list-tab {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 60px;
	}
}

.sidebar {
	grid-column: 3;
	width: 210px;
	grid-row: 1 / span 2;
	margin-top: 20px;
	padding-right: 20px;
	box-sizing: border-box;

	span.header {
		display: block;
		margin: 5px 0;
	}

	label span {
		font-size: 16px;
	}

	.ui-checkboxlist {
		margin-top: 10px;
	}
}

#sidebar-button {
	margin-left: 5px;
}

#tab-items {
	display: grid;
	grid-template-rows: 1fr 70px;
	grid-template-columns: 1fr auto;

	.ui-checkboxlist {
		height: 156px;
	}

	.filter {
		height: 70px;
	}

	#listbox-items {
		.item {
			align-items: center;
			height: 46px;
			font-size: 1.2em;
			display: flex;
		}

		.item-buttons {
			list-style: none;
			margin-left: auto;
			margin-right: 15px;
			
			li {
				margin-left: 5px;
				font-weight: bold;
				cursor: pointer;
				display: inline;
			}
		}

		.item-icon {
			width: 32px;
			height: 32px;
			border: 1px solid #8a8a8a;
			background-size: 115%;
			background-position: center;
			background-repeat: no-repeat;
			margin-right: 10px;
			float: left;
		}

		.item-id {
			color: grey;
			font-size: 0.8em;
		}

		.item-quality-0 {
			color: #9d9d9d;
		}

		.item-quality-1 {
			color: #ffffff;
		}

		.item-quality-2 {
			color: #1eff00;
		}

		.item-quality-3 {
			color: #0070dd;
		}

		.item-quality-4 {
			color: #a335ee;
		}

		.item-quality-5 {
			color: #ff8000;
		}

		.item-quality-6 {
			color: #e6cc80;
		}

		.item-quality-7, .item-quality-8 {
			color: #00ccff;
		}
	}
}

#tab-models {
	grid-template-columns: 1fr 1fr auto;

	#model-sidebar {

		.ui-checkboxlist, .ui-listbox {
			height: 156px;
		}

		.list-toggles {
			font-size: 14px;
			text-align: center;
			margin-top: 5px;
		}
	}
}

#tab-maps {
	#listbox-maps {
		.sub {
			margin-right: 5px;
		}

		.sub-0 {
			// Expansion icon field.
			background-repeat: no-repeat;
			background-position: center;
			width: 40px;
			color: transparent; // Quick-hack to hide the text for the field.
			display: inline-block;

			// Vanilla
			&[data-item="0"] {
				background-image: url();
			}

			// The Burning Crusade.
			&[data-item="1"] {
				background-image: url();
			}
			
			// Wrath of the Lich King.
			&[data-item="2"] {
				background-image: url();
			}

			// Cataclysm.
			&[data-item="3"] {
				background-image: url();
			}

			// Mists of Pandaria.
			&[data-item="4"] {
				background-image: url();
			}

			// Warlords of Draenor.
			&[data-item="5"] {
				background-image: url();
			}

			// Legion.
			&[data-item="6"] {
				background-image: url();
			}

			// Battle for Azeroth.
			&[data-item="7"] {
				background-image: url();
			}

			// Shadowlands.
			&[data-item="8"] {
				background-image: url();
			}

			// Dragonflight.
			&[data-item="9"] {
				background-image: url('')
			}

			// The War Within
			&[data-item="10"] {
				background-image: url('')
			}
		}

		.sub-1 {
			// Map ID.
			color: var(--form-button-menu);
		}

		.sub-3 {
			// Directory name.
			opacity: 0.5;
			font-style: italic;
		}
	}
}

#tab-install {
	grid-template-columns: 1fr auto;

	&-tray {
		grid-row: 2;
		display: flex;
		margin: 10px;

		.filter {
			flex-grow: 1;
		}
	}

	.sidebar {
		grid-column: 2;
	}
}

#tab-video, #tab-raw {
	grid-template-columns: unset;

	&-tray {
		display: flex;
		margin: 10px;

		.filter {
			flex-grow: 1;
		}

		input[type="button"] {
			margin-right: 5px;
		}
	}
}

.preview-controls, .spaced-preview-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 20px;
	grid-column: 2;
	grid-row: 2;
}

.spaced-preview-controls {
	input {
		margin-left: 5px;
	}
}

#texture-ribbon {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 2;

	&-next, &-prev {
		width: 30px;
		font-weight: bold;
		position: relative;
		cursor: pointer;

		&::before {
			position: absolute;
			top: 38%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4em;
		}
	}

	&-next::before {
		content: '\0203A';
	}

	&-prev::before {
		content: '\02039';
	}

	.slot {
		width: 64px;
		height: 64px;
		margin: 0 5px;
		border: 1px solid blue;
		border: 1px solid var(--border);
		box-shadow: black 0 0 3px 0;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #232323;

		&:hover {
			cursor: pointer;
			border-color: white;
		}
	}
}

.preview-container {
	position: relative;
	margin: 20px 20px 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1;
	grid-column: 2;

	.preview-background {
		border: 1px solid var(--border);
		background-size: 30px 30px;
		background-position: 0 0, 15px 15px;
		background-color: var(--trans-check-b);
		box-shadow: black 0 0 3px 0;
		background-image: linear-gradient(45deg, var(--trans-check-a) 25%, transparent 25%, transparent 75%, var(--trans-check-a) 75%, var(--trans-check-a)),
		linear-gradient(45deg, var(--trans-check-a) 25%, transparent 25%, transparent 75%, var(--trans-check-a) 75%, var(--trans-check-a));
		display: table;
		width: 100%;
		height: 100%;

		.image {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: contain;
		}
	}
}

#model-texture-preview {
	position: absolute;
	width: 100%;
	height: 100%;

	&-toast {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		text-align: center;
		padding: 5px;
		background: rgba(0, 0, 0, 0.753);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

#tab-textures {
	.preview-container {
		position: relative;

		.preview-channels {
			position: absolute;
			bottom: 35px;
			left: 0;
			list-style: none;

			li {
				width: 20px;
				height: 20px;
				background: rgba(0, 0, 0, 0.753);
				display: inline-flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				&:hover, &.selected {
					background: var(--font-alt);
				}
			}
		}

		.preview-info {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			text-align: center;
			padding: 5px;
			background: rgba(0, 0, 0, 0.753);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

#tab-text {
	.preview-controls {
		input {
			margin-left: 5px;
		}
	}

	.preview-container {
		.preview-background {
			background: var(--background-dark);
			position: relative;

			pre {
				overflow: scroll;
				padding: 15px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				user-select: text;
			}
		}
	}
}

#tab-data {
	grid-template-columns: 1fr 3fr;
	.list-container{
		min-width: 20vw;
	}
}

.filter {
	display: flex;
	align-items: center;
	grid-column: 1;
	grid-row: 2;
	position: relative;

	> .regex-info {
		position: absolute;
		right: 17px;
		padding: 3px 6px;
		background: var(--border);
		border-radius: 4px;
		font-size: 0.8em;
		cursor: help;
	}

	input {
		width: 100%;
		margin: 0 10px 0 20px;
	}
}

.list-container {
	position: relative;
	margin: 20px 10px 0 20px;

	.list-status {
		position: absolute;
		bottom: -5px;
		background: #1f1f20;
		left: 10px;
		height: 27px;
		right: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		font-weight: bold;
		padding-left: 10px;
		padding-top: 3px;
	}

	.ui-listbox {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 25px;
	}

	.ui-datatable {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0px;
	}
}

@keyframes sound-audiobox-anim {
	to {
		background-position-x: -4326px;
	}
}

#sound-player {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	&-info {
		display: flex;
		justify-content: space-between;

		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0 15px;
		}
	}

	&-anim {
		width: 309px;
		height: 397px;
		background: url(./images/audiobox.png) no-repeat;
		animation: sound-audiobox-anim 0.7s steps(14, end) infinite paused;
	}

	&-controls {
		margin-top: 20px;
		width: 90%;

		#slider-seek {
			margin: 8px 0;
		}

		.buttons {
			display: flex;
			flex-direction: row;
			align-items: center;

			input[type="button"] {
				height: 30px;
				width: 30px;
				padding: 0;
				border-radius: 0;
				border: 1px solid var(--border);
				box-shadow: black 0 0 1px;
				background-color: var(--background-dark);
				background-repeat: no-repeat;
				background-position: center;
				background-image: url(./fa-icons/pause.svg);
				background-size: 10px;
				
				&.isPlaying {
					background-image: url(./fa-icons/play.svg);
					background-size: 12px;
				}
			}

			#slider-volume {
				width: 100px;
				margin-left: auto;

				&::before {
					position: absolute;
					right: 100%;
					margin-right: 8px;
					height: 100%;
					width: 15px;
					content: ' ';
					background-image: url(./fa-icons/volume.svg);
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}
	}
}

#tab-characters {
	display: flex;
	justify-content: space-between;

	.texture-preview-panel {
		position: absolute;
		width: 392px;
		bottom: 5px;
		right: 10px;

		#chr-overlay-btn {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
			position: absolute;
			left: 0;
			right: 0;
			top: -43px;
		}

		canvas {
			width: 100%;
		}
	}

	.preview-container {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		margin: 20px;
	}

	.header {
		margin: 5px 0;
		display: block;
	}

	.tab-control {
		display: flex;
		flex-direction: row;
		justify-content: center;

		& > span:first-child {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
		}

		& > span:last-child {
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		span {
			width: 100%;
			text-align: center;
			font-size: 20px;
			padding: 5px;
			cursor: pointer;
			background-color: var(--form-button-disabled);

			&.selected {
				background-color: var(--form-button-hover);
			}
		}
	}

	.left-panel {
		padding: 20px 0 20px 20px;
		width: 315px;
		min-width: 315px;

		.model-tab {
			#inline-npc-races {
				margin: 3px 15px;
				float: right;
				font-size: 12px;
			}
		}

		#listbox-chr-race {
			height: 417px;
			clear: both;
		}

		#listbox-chr-model {
			height: 52px;
		}

		#listbox-chr-option {
			height: 208px;
		}

		#listbox-chr-choice {
			height: 313px;
		}
	}

	.right-panel {
		padding: 20px 20px 20px 0;
		width: 300px;
		min-width: 300px;

		#character-import-panel {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
			margin-bottom: 15px;
		
			input[type=text] {
				width: 177px;
				margin: 2px;
			}
		
			label {
				font-size: 12px;
			}
		
			ul {
				margin: 5px;
			}
		}

		#checkbox-geosets {
			height: 313px;
			margin-top: 5px;
		}

		.list-toggles {
			margin: 5px 0;
		}

		#export-char-btn {
			margin-top: 10px;
		}
	}
}